<template>
  <div class="filter-bar">
    <div class="container">
      <div class="filter-content">
        <!-- 第一行：全部/共享/原创 和 颜色选择器 -->
        <div class="filter-row-1">
          <div class="filter-tabs">
            <button 
              :class="['tab-btn', {active: selectedTab === 'all'}]" 
              @click="updateTab('all')"
            >
              全部
            </button>
            <button 
              :class="['tab-btn', {active: selectedTab === 'scenery'}]" 
              @click="updateTab('scenery')"
            >
              共享
            </button>
            <button 
              :class="['tab-btn', {active: selectedTab === 'animal'}]" 
              @click="updateTab('animal')"
            >
              原创
            </button>
          </div>

          <div class="filter-colors">
            <button 
              v-for="index in 12" 
              :key="index"
              class="color-btn" 
              @click="selectColor(index)"
            >
              <img 
                :src="colorImages[index]" 
                :alt="`颜色${index}`" 
                class="color-img"
              >
            </button>
            <img 
              :src="clearColorIcon" 
              alt="清除选择" 
              class="clear-color-btn"
              @click="clearColorSelection"
            >
          </div>
        </div>

        <!-- 第二行：标签选项 和 比例图标 -->
        <div class="filter-row-2">
          <!-- 固定的"全部类型" -->
          <button 
            :class="['filter-chip', 'filter-chip-fixed', {active: selectedOptions.includes('all')}]"
            @click="toggleOption('all')"
          >
            全部类型
          </button>
          <span class="filter-divider"></span>
          
          <!-- 可滚动的其他标签 -->
          <div class="filter-options">
            <button 
              v-for="option in filterOptions.filter(opt => opt.id !== 'all')" 
              :key="option.id"
              :class="['filter-chip', {active: selectedOptions.includes(option.id)}]"
              @click="toggleOption(option.id)"
            >
              {{ option.label }}
            </button>
          </div>

          <div class="filter-actions">
            <span class="action-label">比例</span>
            <span class="divider"></span>
            <div class="view-btns">
              <button :class="['view-btn', {active: viewMode === 'grid'}]" @click="viewMode = 'grid'">
                横
              </button>
              <button :class="['view-btn', {active: viewMode === 'list'}]" @click="viewMode = 'list'">
                竖
              </button>
            </div>
            <div class="dropdown-btn format-dropdown" @click="toggleFormatDropdown">
              <span>格式</span>
              <svg class="dropdown-icon" width="10" height="6" viewBox="0 0 10 6" fill="none">
                <path d="M1 1L5 5L9 1" stroke="#999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              <!-- 格式选择弹窗 -->
              <div v-if="showFormatDropdown" class="format-dropdown-menu" @click.stop>
                <div class="format-header">
                  <h3 class="format-title">作品格式</h3>
                  <button class="format-confirm-btn" @click="confirmFormat">确定</button>
                </div>
                <div class="format-options-grid">
                  <div 
                    v-for="format in formatOptions" 
                    :key="format.id"
                    :class="['format-option', { active: selectedFormats.includes(format.id) }]"
                    @click="toggleFormat(format.id)"
                  >
                    {{ format.label }}
                  </div>
                </div>
              </div>
            </div>
            <div class="dropdown-btn sort-dropdown" @click="toggleSortDropdown">
              <span>排序</span>
              <svg class="dropdown-icon" width="10" height="6" viewBox="0 0 10 6" fill="none">
                <path d="M1 1L5 5L9 1" stroke="#999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              <!-- 排序下拉菜单 -->
              <div v-if="showSortDropdown" class="sort-dropdown-menu">
                <div 
                  v-for="option in sortOptions" 
                  :key="option.id"
                  :class="['sort-option', { active: selectedSort === option.id && selectedSort !== '' }]"
                  @click.stop="selectSort(option.id)"
                >
                  {{ option.label }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'

const props = defineProps({
  selectedTab: String,
  colors: Array
})

const emit = defineEmits(['update:selectedTab'])

const viewMode = ref('grid')
const selectedOptions = ref([]) // 默认不选中任何标签
const filterOptions = ref([
  { id: 'all', label: '全部类型' },
  { id: 'recommend', label: '海报' },
  { id: 'visual', label: '主视觉' },
  { id: 'illustration', label: 'DM/画册/折页' },
  { id: 'vvip', label: 'VI/IP' },
  { id: 'design', label: '广告设计' },
  { id: 'element', label: '元素' },
  { id: 'photo', label: '摄影/图片' },
  { id: 'culture', label: '展陈/文化墙' },
  { id: '3d', label: '3D模型' },
  { id: 'ppt', label: 'PPT' },
  { id: 'other', label: '其它' }
])

// 排序选项
const sortOptions = ref([
  { id: 'all', label: '全部' },
  { id: 'recommend', label: '推荐' },
  { id: 'hot', label: '热门' },
  { id: 'downloads', label: '最多下载' },
  { id: 'latest', label: '最新上传' },
  { id: 'free', label: '免费作品' }
])

const selectedSort = ref('all') // 默认选中"全部"
const showSortDropdown = ref(false)

// 格式选项
const formatOptions = ref([
  { id: 'unlimited', label: '不限' },
  { id: 'psd', label: 'PSD' },
  { id: 'psd_ai', label: 'PSD+AI' },
  { id: 'psd_cdr', label: 'PSD+CDR' },
  { id: 'cdr', label: 'CDR' },
  { id: 'ai', label: 'AI' },
  { id: 'jpg', label: 'JPG' },
  { id: 'eps', label: 'EPS' },
  { id: 'c4d', label: 'C4D' },
  { id: 'blender', label: 'blender' },
  { id: 'ppt', label: 'PPT' },
  { id: 'skp', label: 'skp' }
])

const selectedFormats = ref([]) // 默认不选中任何格式
const showFormatDropdown = ref(false)

// 颜色选择器图片路径
const colorImages = computed(() => {
  const images = {}
  for (let i = 1; i <= 12; i++) {
    if (i === 1) {
      images[i] = require('~/assets/images/img/B-01首页_slices/颜色选择.png')
    } else {
      images[i] = require(`~/assets/images/img/B-01首页_slices/颜色选择(${i-1}).png`)
    }
  }
  return images
})

const clearColorIcon = require('~/assets/images/img/B-01首页_slices/搜索_清除选择.png')

const updateTab = (tab) => {
  emit('update:selectedTab', tab)
}

const toggleOption = (optionId) => {
  const index = selectedOptions.value.indexOf(optionId)
  if (index > -1) {
    // 如果已选中，则取消选中
    selectedOptions.value.splice(index, 1)
  } else {
    // 如果未选中，则添加选中
    selectedOptions.value.push(optionId)
  }
  console.log('已选择的标签:', selectedOptions.value)
}

const selectColor = (color) => {
  console.log('选择颜色:', color)
}

const clearColorSelection = () => {
  console.log('清除颜色选择')
}

const toggleSortDropdown = () => {
  showSortDropdown.value = !showSortDropdown.value
}

const selectSort = (sortId) => {
  selectedSort.value = sortId
  showSortDropdown.value = false
  console.log('选择排序:', sortId)
}

const toggleFormatDropdown = () => {
  showFormatDropdown.value = !showFormatDropdown.value
}

const toggleFormat = (formatId) => {
  const index = selectedFormats.value.indexOf(formatId)
  if (index > -1) {
    selectedFormats.value.splice(index, 1)
  } else {
    selectedFormats.value.push(formatId)
  }
}

const confirmFormat = () => {
  showFormatDropdown.value = false
  console.log('选择的格式:', selectedFormats.value)
}

// 点击外部关闭下拉菜单
const handleClickOutside = (event) => {
  const sortDropdown = event.target.closest('.sort-dropdown')
  const formatDropdown = event.target.closest('.format-dropdown')
  if (!sortDropdown && showSortDropdown.value) {
    showSortDropdown.value = false
  }
  if (!formatDropdown && showFormatDropdown.value) {
    showFormatDropdown.value = false
  }
}

onMounted(() => {
  document.addEventListener('click', handleClickOutside)
})

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
})
</script>

<style scoped>
.filter-bar {
  padding: 20px 50px;
}

.filter-content {
  background: white;
  padding: 12px 20px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 第一行 */
.filter-row-1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.filter-tabs {
  display: flex;
  gap: 0;
  background: #F8F8F8;
  border-radius: 25px;
  flex-shrink: 0;
}

.tab-btn {
  padding: 6px 18px;
  border: none;
  background: transparent;
  border-radius: 22px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.3s;
  font-weight: 500;
  color: #666;
}

.tab-btn.active {
  background: #2E2E30;
  color: #19D8B6;
}

.tab-btn:hover:not(.active) {
  background: rgba(45, 95, 93, 0.1);
}

.filter-colors {
  display: flex;
  align-items: center;
  gap: 15px;
}

.clear-color-btn {
  width: 16px;
  height: 16px;
  cursor: pointer;
  margin-left: 20px;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.clear-color-btn:hover {
  transform: scale(1.1);
}

.color-btn {
  width: auto;
  height: auto;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  transition: transform 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.color-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
}

.color-btn:hover {
  transform: scale(1.15);
}

/* 第二行 */
.filter-row-2 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}

.filter-chip-fixed {
  flex-shrink: 0;
}

.filter-divider {
  width: 1px;
  height: 18px;
  background: #E0E0E0;
  flex-shrink: 0;
}

.filter-options {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.filter-options::-webkit-scrollbar {
  height: 0;
  display: none;
}

.filter-chip {
  padding: 5px 14px;
  border: none;
  background: #F5F5F5;
  border-radius: 15px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s;
  color: #666;
  white-space: nowrap;
}

.filter-chip.active {
  background: #19D8B6;
  color: white;
}

.filter-chip:hover:not(.active) {
  background: #E8E8E8;
}

.filter-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.action-label {
  font-size: 13px;
  color: #999;
  margin-right: 4px;
}

.divider {
  width: 1px;
  height: 16px;
  background: #E0E0E0;
}

.view-btns {
  display: flex;
  align-items: center;
}

.view-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: #999;
  padding: 4px 6px;
  transition: color 0.3s;
}

.view-btn.active {
  color: #19D8B6;
}

.view-btn:hover:not(.active) {
  color: #666;
}

.dropdown-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 13px;
  color: #999;
  padding: 4px 8px;
  transition: color 0.3s;
}

.dropdown-btn:hover {
  color: #19D8B6;
}

.dropdown-btn:hover .dropdown-icon path {
  stroke: #19D8B6;
}

.dropdown-icon {
  flex-shrink: 0;
}

.sort-dropdown {
  position: relative;
}

.sort-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 8px 0;
  width: 88px;
  z-index: 1000;
}

.sort-option {
  padding: 10px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  white-space: nowrap;
}

.sort-option:hover {
  background: #F5F5F5;
}

.sort-option.active {
  background: #F5F5F5;
  color: #19D8B6;
}

.format-dropdown {
  position: relative;
}

.format-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 20px;
  min-width: 400px;
  z-index: 2000;
}

.format-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.format-title {
  font-size: 14px;
  color: #2E2E30;
  margin: 0;
}

.format-confirm-btn {
  padding: 6px 18px;
  background: #2E2E30;
  color: #19D8B6;
  border: none;
  border-radius: 22px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.3s;
}

.format-confirm-btn:hover {
  background: #555;
}

.format-options-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.format-option {
  padding: 5px 14px;
  background: #F5F5F5;
  color: #666;
  border-radius: 15px;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  white-space: nowrap;
  border: none;
}

.format-option:hover:not(.active) {
  background: #E8E8E8;
}

.format-option.active {
  background: #19D8B6;
  color: white;
}
</style>

